<div class="main-top">
  <div class="main-top__search">
    <h1>Explore your block</h1>
    <app-search></app-search>
  </div>
</div>
<ng-container *ngIf="(address | async) as addr; else addressNotFound">
  <div class="uk-margin">
    <div class="uk-overflow-auto list-holder">
      <ul>
        <li>
          <p>Address hash:</p>
          <b>{{addr.address}}</b>
        </li>
        <li>
          <p>Balance:</p>
          <b>{{addr.balance_wei | weiToGO | bigNumber}}</b>
        </li>
        <ng-container *ngIf="addr.contract && addr.go20">
          <li>
            <ul>
              <li>
                <p>Token name:</p>
                <b>{{addr.token_name}}</b>
              </li>
              <li>
                <p>Token symbol:</p>
                <b>{{addr.token_symbol}}</b>
              </li>
              <li>
                <p>Total supply:</p>
                <b>{{addr.total_supply | weiToGO: false : true : addr.decimals | bigNumber}}</b>
              </li>
            </ul>
          </li>
          <li>
            <p>Decimals:</p>
            <b>{{addr.decimals}}</b>
          </li>
        </ng-container>
        <li>
          <ul>
            <li>
              <p>Total transactions:</p>
              <b>{{addr.number_of_transactions}}</b>
            </li>
            <ng-container *ngIf="addr.contract && addr.go20">
              <li>
                <p>Total internal transactions:</p>
                <b>{{addr.number_of_internal_transactions}}</b>
              </li>
              <li>
                <p>Total holders:</p>
                <b>{{addr.number_of_token_holders}}</b>
              </li>
            </ng-container>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="uk-margin">
    <app-tabs name="addr_tab">
      <tab name="transactions">
        <tab-title>
          Transactions
        </tab-title>
        <tab-content>
          <ng-container *ngIf="transactions.length; else emptyTransactions">
            <ng-container *ifViewportSize="['small']">
              <div class="tr-card" *ngFor="let tx of transactions">
                <div class="uk-text-truncate">Tx hash: <a routerLink="/tx/{{tx.tx_hash}}">{{tx.tx_hash}}</a>
                </div>
                <div class="uk-text-truncate">Created: {{tx.created_at| date: 'dd/MM/yyyy HH:mm:ss'}}
                  ({{tx.created_at | timeAgo}})
                </div>
                <div class="uk-text-truncate">Associate:
                  <ng-container *ngIf="addr.address === tx.to; else out">
                    <i class="fas fa-arrow-left fa-fw"></i>
                    <a routerLink="/addr/{{tx.from}}">{{tx.from}}</a>
                  </ng-container>
                  <ng-template #out>
                    <i class="fas fa-arrow-right fa-fw"></i>
                    <a routerLink="/addr/{{tx.to}}">{{tx.to}}</a>
                  </ng-template>
                </div>
                <div>Value (GO): {{addr.address === tx.to ? '+' : '-'}} {{tx.value | weiToGO: false : false |
                  bigNumber}}
                </div>
              </div>
            </ng-container>
            <ng-container *ifViewportSize="['large']">
              <div class="uk-overflow-auto">
                <table class="uk-table uk-table-small uk-table-striped">
                  <thead>
                    <tr>
                      <th class="w_2_6">Transaction hash</th>
                      <th class="uk-text-nowrap uk-table-shrink">Created at</th>
                      <th class="uk-table-shrink"></th>
                      <th class="w_2_6">Associate</th>
                      <th class="uk-text-nowrap uk-table-shrink">Value (GO)</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let tx of transactions">
                      <td class="uk-text-truncate"><a class="ws-p" routerLink="/tx/{{tx.tx_hash}}">{{tx.tx_hash}}</a></td>
                      <td class="uk-text-nowrap">
                        {{tx.created_at| date: 'dd/MM/yyyy HH:mm:ss'}} ({{tx.created_at | timeAgo}})
                      </td>
                      <ng-container *ngIf="addr.address === tx.to; else out">
                        <td>
                          <i class="fas fa-arrow-left fa-fw"></i>
                        </td>
                        <td class="uk-text-truncate">
                          <a class="ws-p" routerLink="/addr/{{tx.from}}">{{tx.from}}</a>
                        </td>
                      </ng-container>
                      <ng-template #out>
                        <td>
                          <i class="fas fa-arrow-right fa-fw"></i>
                        </td>
                        <td class="uk-text-truncate">
                          <a class="ws-p" routerLink="/addr/{{tx.to}}">{{tx.to}}</a>
                        </td>
                      </ng-template>
                      <td class="uk-text-nowrap ta-r ws-p">
                        {{addr.address === tx.to ? '+' : '-'}} {{tx.value | weiToGO: false : true | bigNumber}}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </ng-container>
            <div class="uk-margin">
              <ng-template [appInfinityScroll]="transactionScrollState" (onView)="onScroll('transaction')">
                <app-loader></app-loader>
              </ng-template>
            </div>
          </ng-container>
          <ng-template #emptyTransactions>
            <div class="empty">No transactions</div>
          </ng-template>
        </tab-content>
      </tab>
      <tab *ngIf="addr.contract && addr.go20" name="internal_transactions">
        <tab-title>
          Internal Transactions
        </tab-title>
        <tab-content>
          <ng-container *ngIf="internal_transactions.length; else emptyInternal">
            <ng-container *ifViewportSize="['small']">
              <div class="tr-card" *ngFor="let tx of internal_transactions">
                <div class="uk-text-truncate"> <a routerLink="/tx/{{tx.transaction_hash}}">{{tx.transaction_hash}}</a></div>
                <div class="uk-text-truncate">
                  <ng-container *ngIf="tx.created_at != '0001-01-01T00:00:00Z';else updated_at">
                    Created: {{tx.created_at| date: 'dd/MM/yyyy HH:mm:ss'}} ({{tx.created_at | timeAgo }})</ng-container>
                  <ng-template #updated_at>Created: {{tx.updated_at| date: 'dd/MM/yyyy HH:mm:ss'}} ({{tx.updated_at | timeAgo }})</ng-template>
                </div>
                <div class="uk-text-truncate">To: <a routerLink="/addr/{{tx.to_address}}">{{tx.to_address}}</a></div>
                <div class="uk-text-truncate">To: {{tx.to_address}}</div>
                <div>Value ({{addr.token_symbol}}): {{tx.value | weiToGO: false : true : addr.decimals | bigNumber}}</div>
              </div>
            </ng-container>
            <ng-container *ifViewportSize="['medium', 'large']">
              <div class="uk-overflow-auto">
                <table class="uk-table uk-table-small uk-table-striped" style="table-layout: fixed;">
                  <thead>
                    <tr>
                      <!--<th class="uk-text-nowrap uk-table-shrink">Block</th>-->
                      <th class="uk-width-1-5">Transaction hash</th>
                      <th class="uk-width-1-5 uk-text-nowrap uk-table-shrink">Created at</th>
                      <th class="uk-width-1-5">From</th>
                      <th class="uk-width-1-5">To</th>
                      <th class="uk-width-1-5 uk-text-nowrap">Value ({{addr.token_symbol}})</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let tx of internal_transactions">
                      <td class="uk-text-truncate"><a class="ws-p" routerLink="/tx/{{tx.transaction_hash}}">{{tx.transaction_hash}}</a></td>
                      <td>
                        <ng-container *ngIf="tx.created_at != '0001-01-01T00:00:00Z';else updated_at">
                          {{tx.created_at| date: 'dd/MM/yyyy HH:mm:ss'}} ({{tx.created_at | timeAgo }})
                        </ng-container>
                        <ng-template #updated_at>
                          {{tx.updated_at| date: 'dd/MM/yyyy HH:mm:ss'}} ({{tx.updated_at | timeAgo }})</ng-template>
                      </td>
                      <td class="uk-text-truncate"><a class="ws-p" routerLink="/addr/{{tx.from_address}}">{{tx.from_address}}</a></td>
                      <td class="uk-text-truncate"><a class="ws-p" routerLink="/addr/{{tx.to_address}}">{{tx.to_address}}</a></td>
                      <td class="uk-text-nowrap ta-r ws-p">{{tx.value | weiToGO: false : true : addr.decimals |
                        bigNumber}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </ng-container>
            <div class="uk-margin">
              <ng-template [appInfinityScroll]="internalTransactionScrollState" (onView)="onScroll('internalTransaction')">
                <app-loader></app-loader>
              </ng-template>
            </div>
          </ng-container>
          <ng-template #emptyInternal>
            <div class="empty">No internal transactions</div>
          </ng-template>
        </tab-content>
      </tab>
      <tab *ngIf="addr.contract && addr.go20" name="holders">
        <tab-title>
          Holders
        </tab-title>
        <tab-content>
          <ng-container *ngIf="token_holders.length; else emptyHolders">
            <ng-container *ifViewportSize="['small']">
              <div class="tr-card" *ngFor="let holder of token_holders">
                <div class="uk-text-truncate">Token holder: <a routerLink="/addr/{{holder.token_holder_address}}">{{holder.token_holder_address}}</a>
                </div>
                <div class="uk-text-truncate">Balance ({{addr.token_symbol}}): {{holder.balance | weiToGO: false : true
                  : addr.decimals | bigNumber}}
                </div>
              </div>
            </ng-container>
            <ng-container *ifViewportSize="['medium', 'large']">
              <div class="uk-overflow-auto">
                <table class="uk-table uk-table-small uk-table-striped" style="table-layout: fixed;">
                  <thead>
                    <tr>
                      <th class="uk-width-1-2">Token holder</th>
                      <th class="uk-width-1-2">Balance ({{addr.token_symbol}})</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let holder of token_holders">
                      <td class="uk-text-truncate">
                        <a class="ws-p" routerLink="/addr/{{holder.token_holder_address}}">{{holder.token_holder_address}}</a>
                      </td>
                      <td class="uk-text-nowrap ta-r ws-p">{{holder.balance | weiToGO: false : true : addr.decimals |
                        bigNumber}}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </ng-container>
            <div class="uk-margin">
              <ng-template [appInfinityScroll]="holderScrollState" (onView)="onScroll('holder')">
                <app-loader></app-loader>
              </ng-template>
            </div>
          </ng-container>
          <ng-template #emptyHolders>
            <div class="empty">No holders</div>
          </ng-template>
        </tab-content>
      </tab>
      <tab *ngIf="addr.contract" name="contract_source">
        <tab-title>
          Contract Source
        </tab-title>
        <tab-content>
          <ng-container *ngIf="contract">
            <ng-container *ngIf="!contract.valid">
              <h5 class="uk-margin uk-margin-top"><i class="fas fa-exclamation-triangle"></i> Contract Source Code
                Unverified</h5>
              <a routerLink="/verify" [queryParams]="{address: addr.address}" class="btn">Verify And Publish Source
                Code</a>
            </ng-container>
            <ng-container *ngIf="contract.valid">
              <h5 class="uk-margin uk-margin-top"><i class="fas fa-thumbs-up"></i> Contract Source Code Verified</h5>
              <h5 class="uk-margin uk-margin-large-top"><i class="fas fa-code"></i> Contract Source Code</h5>
              <p>Contract Name: {{contract.contract_name}}</p>
              <p>Compiler Version: {{contract.compiler_version}}</p>
              <p>Optimization: {{contract.optimization}}</p>
              <p>Verified: {{contract.updated_at | date: 'dd/MM/yyyy HH:mm:ss'}} ({{contract.updated_at | timeAgo}})</p>
              <pre class="code">{{contract.source_code}}</pre>
            </ng-container>
            <h5 class="uk-margin uk-margin-large-top"><i class="fas fa-microchip"></i> Contract Bytecode</h5>
            <pre class="code">{{contract.byte_code}}</pre>
          </ng-container>
        </tab-content>
      </tab>
    </app-tabs>
  </div>
</ng-container>
<ng-template #addressNotFound>
  <app-info text="Address not found"></app-info>
</ng-template>